import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    Platform,
} from 'react-native';
import {Navigator} from "react-native-deprecated-custom-components"
import TabNavigator from 'react-native-tab-navigator';
import Home from "./View/Home/Home"
import More from "./View/More/More"
import Me from "./View/Me/Me"
import Shop from "./View/Shop/Shop"
export default class App extends Component {
    constructor(props){
        super(props)
        this.state ={
            selectedTab:'home'
        }
    }
    render() {
        return (
            <TabNavigator>
                <TabNavigator.Item
                    title="首页"
                    renderIcon={() => <Image source={ require('./assets/image/main_home.png')} style={styles.iconStyle} />}
                    renderSelectedIcon={() => <Image source={require('./assets/image/main_home_press.png') } style={styles.iconStyle} />}
                    onPress={()=>{this.setState({selectedTab:'home'  })}}
                    selected={this.state.selectedTab === 'home'}
                    selectedTitleStyle={styles.selectedTitleStyle}
                    badgeText=''
                >
                    <Navigator
                        initialRoute={{name:"首页",component:Home}}
                        renderScene={(route,navigator)=>{
                            return <route.component {...route.passProps} navigator={navigator}/>;
                        }}
                    />
                </TabNavigator.Item>
                <TabNavigator.Item
                    title="商家"
                    renderIcon={() => <Image source={ require('./assets/image/main_community.png')} style={styles.iconStyle} />}
                    renderSelectedIcon={() => <Image source={require('./assets/image/main_community_press.png') } style={styles.iconStyle} />}
                    onPress={()=>{this.setState({selectedTab:'shop'  })}}
                    selected={this.state.selectedTab === 'shop'}
                    selectedTitleStyle={styles.selectedTitleStyle}
                    badgeText=''
                >
                    <Navigator
                        initialRoute={{name:"商家",component:Shop}}
                        renderScene={(route,navigator)=>{
                            return <route.component {...route.passProps} navigator={navigator}/>;
                        }}
                    />
                </TabNavigator.Item>
                <TabNavigator.Item
                    title="更多"
                    renderIcon={() => <Image source={ require('./assets/image/main_type.png')} style={styles.iconStyle} />}
                    renderSelectedIcon={() => <Image source={require('./assets/image/main_type_press.png') } style={styles.iconStyle} />}
                    onPress={()=>{this.setState({selectedTab:'more'  })}}
                    selected={this.state.selectedTab === 'more'}
                    selectedTitleStyle={styles.selectedTitleStyle}
                    badgeText=''
                >
                    <Navigator
                        initialRoute={{name:"更多",component:More}}
                        renderScene={(route,navigator)=>{
                            return <route.component {...route.passProps} navigator={navigator}/>;
                        }}
                    />
                </TabNavigator.Item>
                <TabNavigator.Item
                    title="我的"
                    renderIcon={() => <Image source={ require('./assets/image/main_user.png')} style={styles.iconStyle} />}
                    renderSelectedIcon={() => <Image source={require('./assets/image/main_user_press.png') } style={styles.iconStyle} />}
                    onPress={()=>{this.setState({selectedTab:'mine'  })}}
                    selected={this.state.selectedTab === 'mine'}
                    selectedTitleStyle={styles.selectedTitleStyle}
                    badgeText=''
                >
                    <Navigator
                        initialRoute={{name:"我的",component:Me}}
                        renderScene={(route,navigator)=>{
                            return <route.component {...route.passProps} navigator={navigator}/>;
                        }}
                    />
                </TabNavigator.Item>
            </TabNavigator>

        )
    }
}
const styles = StyleSheet.create({
    iconStyle:{
        width:28,
        height:28
    },
    selectedTitleStyle:{
        color:'#FF3C25',fontSize:14
    }
});
